// @ts-nocheck
import { Form, Radio, Checkbox } from 'antd'

import {
  Input,
  Cascader,
  Select,
  TreeSelect,
  TextArea,
  TimePicker,
  RangePicker,
  DatePicker,
  DynamicOptionsSelect
} from '@/components'

const getFormItemName = (name, field) => {
  if (field) return [field, name]
  return name
}

const renderFormItem = (config, field = '') => {
  const { type, formItemProps, props = {}, render } = config
  if (render) return render()

  let element = null

  switch (type) {
    case 'Select':
      element = <Select {...props} />
      break
    case 'DSelect':
      element = <DynamicOptionsSelect {...props} />
      break
    case 'Cascader':
      element = <Cascader {...props} />
      break

    case 'TreeSelect':
      element = <TreeSelect {...props} />
      break
    case 'RadioGroup':
      element = <Radio.Group size="small" {...props} />
      break
    case 'CheckboxGroup':
      element = <Checkbox.Group {...props} />
      break
    case 'TimePicker':
      element = <TimePicker {...props} />
      break
    case 'DatePicker':
      element = <DatePicker {...props} />
      break
    case 'RangePicker':
      element = <RangePicker {...props} />
      break
    case 'TextArea':
      element = <TextArea {...props} />
      break
    case 'Input':
      element = <Input {...props} />
      break
    default:
      break
  }
  return (
    <Form.Item
      key={formItemProps.name}
      {...formItemProps}
      name={getFormItemName(formItemProps.name, field)}
    >
      {element}
    </Form.Item>
  )
}

export { renderFormItem }
